<template>
	<view class="wallet-main">
		<view class="wallet-box">
			<view class="tit">
				保证金
			</view>
			<view class="wallet-data">
				<view class="wallet-tit">
					余额
				</view>
				<view class="wallet-nums">
					<text style="font-size: 12px;">￥</text>999.00
				</view>
			</view>
			<view class="wallet-option">
				<view class="wallet-option-mx" @click="gotoPath('/pages/walletDetail/walletDetail')">
					明细<uni-icons type="right" size="16"></uni-icons>
				</view>

				<view class="wallet-option-gz">
					规则<uni-icons type="right" size="16"></uni-icons>
				</view>
			</view>
		</view>

		<view class="wallet-form">
			<view class="wallet-form-tit">
				<text class="tit">充值金额</text>
			</view>
			<view class="wallet-list">
				<view class="wallet-item" v-for="item in walletList" :key="item.key" @click="changeWallet(item)"
					:class="walletIndex == item.key ? 'active':''">
					{{item.name}}
				</view>
			</view>
		</view>

		<view class="wallet-way">
			<view class="tit">
				选择支付方式
			</view>
			<view class="wayItem">
				<view class="wayTit">
					<uni-icons type="weixin" size="20" color="#42b983"></uni-icons>
					<text style="margin-left: 4px;">微信支付</text>
				</view>
				<view class="wayIcon">
					<uni-icons type="checkbox-filled" size="20" color="red"></uni-icons>
				</view>
			</view>
		</view>

		<view class="wallet-btn">
			确认支付
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				walletList: [{
						name: "10",
						key: "1"
					},
					{
						name: "50",
						key: "2"
					},
					{
						name: "100",
						key: "3"
					},
					{
						name: "200",
						key: "4"
					},
					{
						name: "500",
						key: "5"
					},
					{
						name: "1000",
						key: "6"
					},
					{
						name: "2000",
						key: "7"
					},
					{
						name: "5000",
						key: "8"
					}
				],
				walletIndex: null
			}
		},
		methods: {
			gotoPath(url) {
				uni.navigateTo({
					url
				})
			},

			changeWallet(rows) {
				this.walletIndex = rows.key;
			}
		}
	}
</script>

<style scoped lang="scss">
	.wallet-main {
		box-sizing: border-box;
		padding: 20rpx;

		.wallet-box {
			background-color: #fff;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 30rpx;
			color: #444;

			.wallet-data {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin: 60rpx 0px;

				.wallet-tit {
					margin-bottom: 10rpx;
				}

				.wallet-nums {
					font-size: 40rpx;
					font-weight: 700;
				}
			}

			.wallet-option {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 26rpx;
			}
		}

		.wallet-form {
			margin-top: 50rpx;

			.wallet-form-tit {
				display: flex;
				justify-content: space-between;

				.tit {
					font-size: 28rpx;
					font-weight: 700;
				}
			}

			.wallet-list {
				display: flex;
				flex-wrap: wrap;
				gap: 10px;
				margin-top: 30rpx;

				.wallet-item {
					width: 160rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center;
					border-radius: 4px;
					background-color: #fff;
					border: 1px #dcdcdc solid;
				}

				.active {
					border: 1px red solid;
				}
			}
		}

		.wallet-way {
			margin-top: 40rpx;

			.tit {
				font-size: 28rpx;
				font-weight: 700;
			}

			.wayItem {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;
				color: #444;
				padding: 0px 20rpx;

				.wayTit {}

				.wayIcon {}
			}
		}

		.wallet-btn {
			background-color: red;
			color: #fff;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 4px;
			margin-top: 60rpx;
		}
	}
</style>